<template>
  <div class="order">
    <div class="table">
      <div class="main_table">
        <el-table
          :header-cell-style="{ background: '#f5f7fa' }"
          :data="order_list"

        >
          <el-table-column label="商品" align="center" prop="product_name"></el-table-column>
          <el-table-column label="单价" align="center" prop="price"></el-table-column>
          <el-table-column label="数量" align="center"  prop="trade_volume"></el-table-column>
          <!-- <el-table-column label="售后" prop="afterMarket"></el-table-column> -->
          <el-table-column label="总价" align="center" prop="total_price"></el-table-column>
          <el-table-column
            align="center" label="交易状态"
            column-key="tag"
            :filter-multiple="false"
            :filter-method="filterTag"
            :filters="order_status"
          >
           <template slot-scope="scope">{{order_status[scope.row.deal_status].text}}</template>
          </el-table-column>
          <el-table-column label="操作" align="center" >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="toOrderDetail(scope.row.id)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      order_list: [],
      purchaser_id: '',

      nums: 25,
      currentPage: 1, // 当前页码
      total: 0,
      detailDate: "",
      form: {
        orderNum: "",
        name: "",
        phoNum: "",
        valueSelct: "",
        goodName: "",
        startTime: "",
        endTime: "",
        orderStatus: [
          {
            value: "选项1",
            label: "全部",
          },
          {
            value: "选项2",
            label: "待卖家修改",
          },
          {
            value: "选项3",
            label: "待付款",
          },
          {
            value: "选项4",
            label: "待发货",
          },
          {
            value: "选项5",
            label: "待确认收货",
          },
          {
            value: "选项6",
            label: "交易成功",
          },
        ],
      },
      list: [
        {
          goodName: "1111货物",
          singlePrice: "20",
          goodNum: "6斤",
          goodOper: "",
          realPrice: 120,
          operationType: "待发货",
        },
      ],
      runArr: [
        { text: "待卖家修改", value: "待卖家修改" },
        { text: "待付款", value: "待付款" },
        { text: "待发货", value: "待发货" },
        { text: "待确认收货", value: "待确认收货" },
        { text: "交易成功", value: "交易成功" },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {
    this.load();
    this.valueSelct = "选项1";
  },
  computed: {
    // 订单状态
    order_status() {
      let status = this.$global.ORDERSTATUS
      let os = []
      for (let i in status) {
        os.push({
          text: status[i],
          value: i,  
        })
      }
      return os
    }
  },
  methods: {
    toOrderDetail(oid) {
      this.$router.push({
        name: 'orderDetail',
        params: {
          oid
        }
      })

    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    dateChange(val) {
      this.form.startTime = val.toString().split(",")[0];
      this.form.endTime = val.toString().split(",")[1];
    },
    filterTag(value, row, column) {
      console.log(value, row)
      return row.deal_status === value; //这个返回值就是返回你要展示的内容
    },
    async load() {
      await this.$API.getPurchaser().then(res => {
          if (res.status == 200) {
            let aid = this.$store.state.user.account_id
            for (let obj of res.data) {
                if (obj.account_id == aid) {
                    this.purchaser_id = obj.id
                    return this.$API.getProductOrder()
                }
            }
          }
      }).then((response) => {
        if (response.status == 200) {
          for (let obj of response.data) {
            if (obj.purchaser_id == this.purchaser_id) this.order_list.push(obj);
          }
          return this.$API.getSpecification()
        }
      }).then(res => {
        if (res.status == 200) {
          this.order_list.forEach((temp) => {
            for (let obj of res.data) {
              if (temp.product_specification_id == obj.id) {
                let id = temp.id
                Object.assign(temp, obj)
                temp.id = id
              }
            }
          });
          return this.$API.getSupply()
        }
      }).then(res => {
        if (res.status == 200) {
          this.order_list.forEach((temp) => {
            for (let obj of res.data) {
              if (temp.product_id == obj.id) {
                this.$set(temp,"product_name",obj.product_name);
              }
            }
        });
        }
      })
    },
  },
};
</script>
<style  scoped>
</style>